<template>
  <div style="width: 100%">
    <bh-datatable
      v-if="statusList"
      :columns='columns'
      :options='{ localdata: statusList }'
      :pageable='false'
    />
  </div>
</template>

<script>
import { BhDatatable } from 'bh-vue'
import { getFlowStatus } from 'services/flow.service'

export default {
  name: 'flow-status',
  props: {
    flowInfo: Object,
  },
  data() {
    return {
      statusList: null,
      columns: [
        { text: '环节', dataField: 'name', sortable: false },
        { text: '处理人', dataField: 'assignee', sortable: false },
        { text: '处理结果', dataField: 'type', sortable: false },
        { text: '开始时间', dataField: 'startTime', sortable: false },
        { text: '结束时间', dataField: 'endTime', sortable: false },
        { text: '耗时', dataField: 'duration', sortable: false },
        { text: '意见', dataField: 'flowComment', sortable: false },
      ]
    }
  },
  created() {
    if (this.flowInfo && this.flowInfo.processInstanceId) {
      getFlowStatus(this.flowInfo.processInstanceId).then(data => {
        this.statusList = data && data.map(item => ({
          ...item,
          name: item.name || '',
          assignee: item.assignee || '',
          type: item.type || '',
          startTime: item.startTime || '',
          endTime: item.endTime || '',
          duration: item.duration || '',
          flowComment: item.flowComment || '',
        }))
      })
    }
  },
  components: {
    BhDatatable,
  }
}
</script>
